<template>
  <div class="swiper">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
// 样式导入
import 'swiper/swiper-bundle.min.css'
import 'swiper/swiper.min.css'
import 'swiper/modules/navigation/navigation.min.css'
import 'swiper/modules/pagination/pagination.min.css'

// 模块安装
import MySwiper, {Navigation, Pagination, Autoplay} from 'swiper';

Swiper.use([Navigation, Pagination, Autoplay]);

export default {
  name: "FilmSwiper.vue",
  mounted() {
    // 初始化过早
    new Swiper(".swiper", {

      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },

      //自动轮播
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
    })
  },
}
</script>

<style scoped>
.swiper {
  width: 3.75rem;
  height: 2.1rem;
  overflow: hidden;
}
</style>
